<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd"
                        type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <!-- <el-form-item>
                    <el-select placeholder="选择品牌" v-model="formInline.brand_id" @change="brandChange" filterable>
                        <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item>
                    <el-select placeholder="选择门店" v-model="formInline.store_id" filterable>
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input  style="width:130px"  v-model="formInline.card_no" placeholder="请输入卡号/手机号" @keyup.enter.native="searchClick"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" label='序号' width="50">
                    <template slot-scope="scope">
                        <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='会员卡号' prop="card_no"></el-table-column>
                <el-table-column align="center" label='手机号' prop="mobile"></el-table-column>
                <el-table-column align="center" label='本次使用/获赠积分' prop="add_score"></el-table-column>
                <el-table-column align="center" label='积分总额' prop="score"></el-table-column>
                <el-table-column align="center" label='时间' prop="create_time"></el-table-column>
                <el-table-column align="center" label='积分类型' prop="source"></el-table-column>
            </el-table>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                :page-size="20" layout="prev, pager, next, jumper" :total="totalDataNumber">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getPage,
        getStoreList,
        getBrandList,
        edit,
        getExport
    } from "@/api/member/member_integralRecord";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                allList: [],
                storeList: null,
                list: null,
                listLoading: false,
                currentPage: 1,
                totalDataNumber: 1,
                formInline: {
                    begin_time: "",
                    end_time: "",
                    card_no: "",
                    store_id: '',
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            // getBrand() {
            //     getBrandList({ org: 1, category_id: 252 }).then(response => {
            //         this.brandList = response;
            //         this.formInline.brand_id = response[0].id
            //         this.getStore()
            //     });
            // },
            // brandChange() {
            //     // this.formInline.store_id = '';
            //     this.getStore();
            // },
            getStore() {
                getStoreList({ category_id: 252 }).then(response => {
                    this.storeList = response;
                     
                     let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    //   console.log(data) 
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else { 
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }

                    this.searchClick();
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.currentPage = 1;
                getPage(this.formInline).then(response => {
                    this.totalDataNumber = response.page * 20;
                    getList(this.formInline).then(response => {
                        this.allList = response;
                        this.list = this.allList.slice((this.currentPage - 1) * 20, this.currentPage * 20)
                        this.listLoading = false;
                    })
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            // 分页
            handleCurrentChange(val) {
                this.list = this.allList.slice((this.currentPage - 1) * 20, this.currentPage * 20)
            },
        }
    };
</script>